<template>
    <div class="edit-ques full box-border"  >
      <el-form :model="ques">
        <el-form-item>
          <el-row class="header">
            <el-col :span="6" align="left">
              <span class="padding-sm" >分类</span>
              <el-button class="vertical-middle" @click="toggleCategoryDialog">{{ques.category?ques.category.name:"请选择"}}</el-button>
            </el-col>
            <el-col :span="5" align="left">
              <span class="padding-sm">类型</span>
              <el-select v-model="ques.type">
                <el-option value="单选">
                  单选
                </el-option>
                <el-option value="多选">
                  多选
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="5" align="left">
              <span class="padding-sm">难度</span>
              <el-select v-model="ques.level">
                <el-option value="简单">
                  简单
                </el-option>
                <el-option value="普通">
                  普通
                </el-option>
                <el-option value="困难">
                  困难
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <form-title tag="题干" des="这里填写题目描述" />
        <el-form-item>
          <el-input  type="textarea" resize="none" v-model="ques.content" />
        </el-form-item>
        <form-title tag="选项" des=" 单/多选题的选项范围从 2 到 20" />
        <div v-if="isSingle">
          <el-form-item v-for="(option,index) in ques.options" :key="'select' + index" >
            <el-col :span="2">
              <el-radio class="full-width" v-model="ques.answer" :label="index"  name="answer" >
                <span>&nbsp;</span>
              </el-radio>
            </el-col>
            <el-col :span="20">
              <el-input v-model="option.value" type="textarea" resize="none" />
            </el-col>
            <el-col :span="2">
              <span class="el-icon-close del-option" @click="removeOption(index)" />
            </el-col>
          </el-form-item>
        </div>
        <div v-if="isMultiple">
          <el-checkbox-group v-model="ques.answer">
            <el-form-item v-for="(option,index) in ques.options" :key="'select' + index" >
              <el-col :span="2">
                <el-checkbox class="full-width" :label="index"  name="answer" >
                  <span>&nbsp;</span>
                </el-checkbox>
              </el-col>
              <el-col :span="20">
                <el-input v-model="option.value" type="textarea" resize="none" />
              </el-col>
              <el-col :span="2">
                <span class="el-icon-close del-option" @click="removeOption(index)" />
              </el-col>
            </el-form-item>
          </el-checkbox-group>
        </div>
      </el-form>
      <div class="full-width box-border" style="padding: 10px 95px 10px 30px">
        <el-button class="full-width" type="info" @click="addOption">添加一个选项</el-button>
      </div>
      <form-title tag="解析" des=" 这里填写该问题对应的答案解释" />
      <el-form>
        <el-input v-model="ques.analysis" type="textarea" resize="none" />
      </el-form>
      <div style="margin: 40px 0">
        <el-button class="full-width" type="danger" @click="saveEdited">保存</el-button>
      </div>
      <category-dialog @on-confirm="setCategory"/>
    </div>
</template>

<script>
import FormTitle from './FormTitle'
import CategoryDialog from './CategoryDialog'
export default {
  mounted: function () {
    if (this.init != null) {
      this.ques = this.init()
    }
  },
  data () {
    return {
      categoryDialogVisible: false,
      ques: {
        content: '',
        options: [{
          value: ''
        }, {
          value: ''
        }],
        analysis: '',
        answer: '',
        category: null,
        level: null,
        type: '单选'
      }
    }
  },
  props: {
    init: {
      type: Function,
      default: null
    }
  },
  computed: {
    isSingle () {
      return this.ques.type === '单选'
    },
    isMultiple () {
      return this.ques.type === '多选'
    }
  },
  watch: {
    'ques.type' (val, oldVal) {
      if (!oldVal) {
        return
      }
      if (val === '单选') {
        this.ques.answer = this.ques.answer[0]
      } else if (val === '多选') {
        this.ques.answer = [this.ques.answer]
      }
    }
  },
  methods: {
    addOption () {
      this.ques.options.push({
        value: ''
      })
    },
    toggleCategoryDialog () {
      this.$bus.$emit('toggle-category-dialog', true)
    },
    removeOption (index) {
      this.ques.options.splice(index, 1)
    },
    setCategory (value) {
      if (value) {
        this.ques.category = value
      }
    },
    saveEdited () {
      // 将data中的数据解开
      let ques = { ...this.ques }
      // 校验题目类型
      if (ques.type == null) {
        this.$message.error('请选择题目类型')
        return
      } else {
        // 将题目的字符串类型转换为数字
        ques.type = this.$converters.convertType(ques.type)
      }
      // 校验题目难度
      if (ques.level == null) {
        this.$message.error('请选择题目难度')
        return
      } else {
        // 将字符串的难度转换为数字
        ques.level = this.$converters.convertLevel(ques.level)
      }
      if (ques.content == null || ques.content.replace(/(^s*)|(s*$)/g, '').length === 0) {
        this.$message.error('题干不能为空')
        return
      }
      if (!ques.options || ques.options.size < 2) {
        this.$message.error('至少要有两个选项')
        return
      } else {
        let options = ''
        ques.options.forEach(item => {
          if (item.value == null || item.value.replace(/^\s*|\s*$/g, '').length === 0) {
            this.$message.error('选项不能为空')
            return
          }
          options += item.value + '|'
        })
        ques.options = options.substr(0, options.length - 1)
      }
      if (ques.category == null) { ques.category = '' }
      // 测试数据
      ques.category = ques.category.id
      this.$emit('on-save-ques', ques)
    }
  },
  components: {
    FormTitle,
    CategoryDialog
  }
}
</script>

<style scoped lang="less">
  @import "../../../assets/css/common";
  .edit-ques{
    padding: 30px 80px;
    overflow: auto;
  }
  .header .el-col>* {
    vertical-align: middle;
  }
  .del-option{
    font-size: 30px;
    &:hover{
      cursor: pointer;
      color:@brand;
    }
  }
</style>
